<template>
  <div class="page-edit">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :labelCol="{ style: { width: '84px' } }"
      :colon="false"
      labelAlign="right"
    >
      <div class="page-edit-common">
        <a-form-item label="广告名称" name="name">
          <a-input v-model:value.trim="formState.name" :maxlength="30" placeholder="请输入广告标题" class="w-[359px]" />
        </a-form-item>
        <a-form-item label="广告图片" name="img_type" class="mb-0">
          <div>
            <a-radio-group v-model:value="formState.img_type" @change="handleTypeChange">
              <a-radio :value="1">文件</a-radio>
              <a-radio :value="2" class="ml-[82px]">URL</a-radio>
            </a-radio-group>
            <div>
              <a-form-item name="img_url">
                <div class="flex items-center">
                  <UploadImage
                    v-if="formState.img_type === 1"
                    fileType="0"
                    imgType="4"
                    fileUrl="v1/common/upload"
                    @getImageInfo="getImageInfo"
                  >
                    <a-input-search
                      v-model:value="formState.img_url"
                      enter-button="上传文件"
                      @search="onSearch"
                      readOnly
                      class="w-[359px]"
                    />
                  </UploadImage>
                  <a-input
                    v-else
                    v-model:value="formState.img_url"
                    placeholder="请输入URL地址"
                    class="w-[359px]"
                    @blur="handleBlur"
                  />
                  <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="previewImage">
                    <template #title>
                      <img
                        alt="example"
                        class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                        :src="previewImage"
                      />
                    </template>
                    <a href="javascript:;" class="flex items-center">
                      <i class="iconfont icon-guanggao text-[18px] mr-[5px]"></i>
                      预览
                    </a>
                  </a-tooltip>
                </div>
                <div class="source-introduce">
                  {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '' }}
                  {{ storage.get('img_size') ? storage.get('img_size') + '以内；' : '' }}建议尺寸558*784px
                </div>
              </a-form-item>
            </div>
          </div>
        </a-form-item>
        <div class="flex">
          <a-form-item label="跳转链接" name="jump_addr">
            <a-input
              v-model:value.trim="formState.jump_addr"
              class="w-[359px]"
              placeholder="请输入https://或http://开头的链接"
            />
          </a-form-item>
        </div>
        <a-form-item label="状态" name="status" class="page-edit-common-form-item">
          <a-radio-group v-model:value="formState.status">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="2" class="ml-[82px]">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </a-form>
    <div class="page-edit-button">
      <a-button type="primary" @click="saveSite">保存广告</a-button>
      <a-button @click="() => $router.back()">返回</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from 'vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'
import { useRouter } from 'vue-router'
import { storage } from '@/utils/storage'
import { formRules } from '../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  advertising: { add, update, detail }
} = apis
const router = useRouter()
const formRef = ref()
const advertisingId = ref()
const baseUrl: any = inject('baseUrl')
const previewImage = ref('')
interface IState {
  id?: string
  library_id?: string | undefined
  adv_type: number
  name: string
  img_type: number //图片或者文字
  img_url: string
  jump_addr: string //跳转链接
  status: number | undefined
}
const formState = reactive<IState>({
  adv_type: 2,
  name: '',
  img_type: 1, //图片或者文字
  img_url: '',
  jump_addr: '', //跳转链接
  status: 1 //1-开启 2-关闭
})

const saveSite = () => {
  formRef.value
    .validate()
    .then(() => {
      if (!advertisingId.value) {
        console.log(formState, 'formState')
        formState.library_id = storage.get('libraryId')
        add(formState).then((res: any) => {
          message.success('添加成功')
          router.back()
        })
      } else {
        formState.id = advertisingId.value
        update(formState).then((res: any) => {
          message.success('编辑成功')
          router.back()
        })
      }
    })
    .catch((err: any) => {
      console.log(err, ':err')
    })
}
//图文类型切换事件
const handleTypeChange = (e: any) => {
  console.log('e: ', e)
  formState.img_url = ''
  previewImage.value = ''
}
const onSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
const handleBlur = (e: any) => {
  previewImage.value = e.target.value
}
const getImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.img_url = value
  formRef.value.clearValidate(['img_url'])
  if (formState.img_type === 1) return (previewImage.value = baseUrl + value)
  previewImage.value = value
}
const getAdDetail = () => {
  detail({ id: advertisingId.value }).then((res: any) => {
    const { adv_type, name, img_type, img_url, jump_addr, status } = res.advertising
    formState.adv_type = adv_type
    formState.name = name
    formState.img_type = img_type
    formState.img_url = img_url
    formState.jump_addr = jump_addr
    formState.status = status
    console.log(res, '启动广告详情')
    if (img_url) {
      if (img_type === 1) {
        previewImage.value = baseUrl + img_url
      } else {
        previewImage.value = img_url
      }
    }
  })
}
onMounted(() => {
  console.log(router.currentRoute.value.query, 'query')
  advertisingId.value = router.currentRoute.value.query.id
  if (!advertisingId.value) return false
  getAdDetail()
})
</script>

<style lang="less" scoped>
.page-edit {
  // width: 1200px;

  .ant-form {
    .page-edit-common {
      min-height: 205px;
      padding-top: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin: 0 0 24px 0;
      }

      .source-introduce {
        margin-top: 8px;
        font-size: 12px;
        color: #bfbfbf;
      }

      :deep(.ant-radio-group) {
        margin: 5px 0 13px;
      }
    }
  }

  &-button {
    margin-top: 24px;
    display: flex;

    button:nth-child(1) {
      margin-right: 16px;
    }
  }
}
</style>
